<template>
	<view class="license-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left">
					<text class="back-icon" @click="goBack">〈</text>
				</view>
				<view class="nav-title">
					<text class="title-text">营业执照</text>
				</view>
				<view class="nav-right">
					<view class="nav-actions">
						<text class="action-icon">...</text>
						<text class="action-icon">-</text>
						<text class="action-icon">○</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 营业执照信息 -->
		<view class="license-content">
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">公司名称:</text>
					<text class="info-value">{{licenseInfo.companyName}}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">公司地址:</text>
					<text class="info-value">{{licenseInfo.address}}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">公司地址地区:</text>
					<text class="info-value">{{licenseInfo.region}}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">员工人数:</text>
					<text class="info-value">{{licenseInfo.employeeCount}}</text>
				</view>
				
				<view class="info-item">
					<text class="info-label">法定经营范围:</text>
					<view class="business-scope">
						<view class="scope-section">
							<text class="scope-title">许可项目:</text>
							<view class="scope-items">
								<text class="scope-item" v-for="(item, index) in licenseInfo.licensedProjects" :key="'licensed-' + index">{{item}}</text>
							</view>
						</view>
						
						<view class="scope-section">
							<text class="scope-title">一般项目:</text>
							<view class="scope-items">
								<text class="scope-item" v-for="(item, index) in licenseInfo.generalProjects" :key="'general-' + index">{{item}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部图片 -->
		<view class="bottom-image">
			<image src="/static/img/a.png" mode="aspectFill" class="license-img"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				licenseInfo: {
					companyName: '杭州酒小二',
					address: '全文',
					region: '河南省,南阳市,淅川县,金河镇',
					employeeCount: '12',
					licensedProjects: [
						'乳制品生产',
						'食品生产',
						'婴幼儿配方食品生产',
						'特殊医学用途配方食品生产',
						'食品添加剂生产',
						'饮料生产',
						'保健食品生产'
					],
					generalProjects: [
						'食用农产品批发',
						'五金产品批发',
						'食品添加剂销售',
						'农副产品销售',
						'纸制品销售',
						'塑料制品制造',
						'金属制品销售',
						'非居住房地产租赁',
						'计量技术服务',
						'信息技术咨询服务',
						'社会经济咨询服务',
						'供应链管理服务',
						'休闲观光活动'
					]
				}
			}
		},
		onLoad() {
			// 获取状态栏高度
			this.getStatusBarHeight()
			// 获取营业执照信息
			this.getLicenseInfo()
		},
		methods: {
			// 获取状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 获取营业执照信息
			getLicenseInfo() {
				// TODO: 调用后端接口获取营业执照信息
				// uni.request({
				// 	url: 'your-api-url/license/info',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.licenseInfo = res.data
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	.license-container {
		background-color: #fff;
		min-height: 100vh;
	}

	/* 自定义导航栏样式 */
	.custom-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
		border-bottom: 1rpx solid #eee;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 88rpx;
	}

	.nav-left {
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
	}

	.nav-title {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.nav-actions {
		display: flex;
		align-items: center;
	}

	.action-icon {
		font-size: 24rpx;
		color: #666;
		margin-left: 15rpx;
	}

	/* 营业执照内容样式 */
	.license-content {
		margin-top: 108rpx; /* 为自定义导航栏留出空间 */
		padding: 30rpx;
	}

	.info-list {
		background-color: #fff;
	}

	.info-item {
		margin-bottom: 30rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 15rpx;
		display: block;
	}

	.info-value {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		display: block;
	}

	.business-scope {
		margin-top: 15rpx;
	}

	.scope-section {
		margin-bottom: 20rpx;
	}

	.scope-title {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.scope-items {
		display: flex;
		flex-wrap: wrap;
	}

	.scope-item {
		font-size: 24rpx;
		color: #666;
		background-color: #f8f8f8;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
	}

	/* 底部图片样式 */
	.bottom-image {
		padding: 30rpx;
		display: flex;
		justify-content: center;
	}

	.license-img {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}
</style>
